<template>
	<w-layout showNavbar navTitle="VIP 优惠券" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #navRight>
			<view @click="$u.route(`/pages/parse/parse?type=10&title=优惠券规则`)" class="">
				规则
			</view>
		</template>
		<template #default>
			<view class="container">
				<view class="public-box-6 px-50 pt-100 pb-60 fc" style="min-height: 1400rpx;">
					<view class="color fs-36">
						<text>领取</text><text class="mx-10">VIP</text>优惠券
					</view>
					<up-gap height="20"></up-gap>
					<scroll-view @scrolltolower="scrolltolower" scroll-y="true" style="max-height: 1150rpx;">
						<view class="public-card-3 fr-ac py-30 mt-30" v-for="(item,index) in state.list" :key="index">
							<view class="w-30 fc-ac">
								<view class="color">
									<text class="fs-32">￥</text>
									<text class="fs-42">{{item.price}}</text>
								</view>
								<view class="fs-24 mt-10">
									满{{item.man_price}}可用
								</view>
							</view>
							<view class="ml-30">
								<view class="">
									{{item.title}}
								</view>
								<view class="op-70 fs-24 mt-15">
									{{item.mark}}
								</view>
							</view>
							<view v-if="item.receive_is == 2" @click="get_receive(item)" class="color bold fs-36 ml-auto mr-45">
								领
							</view>
							<view v-if="item.receive_is == 1" class="op-70 ml-auto mr-25 fs-24">
								已领取
							</view>
							<view v-if="item.receive_is == 3" class="op-70 ml-auto mr-15 fs-24">
								等级不足
							</view>
						</view>
					</scroll-view>
					<no-more :show="state.list.length == 0"></no-more>
				</view>
				
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		receive,
		coupon_vip_list
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		get_coupon_vip_list()
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	function scrolltolower(){
		console.log('底部')
		if(state.last_limit == state.limit){
			state.page++
			get_coupon_vip_list()
		}
	}
	const page = reactive({
		scrollTop:0
	})
	
	const state = reactive({
		list:[],
		page:1,
		limit:10,
		last_limit:10,
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 10
	}
	
	
	async function get_coupon_vip_list(){
		const res = await coupon_vip_list({
			page: state.page
		})
		state.last_limit = res.coupon_list.list.length
		state.list = state.list.concat(res.coupon_list.list)
	}
	
	async function get_receive(item){
		const res = await receive({
			coupon_id: item.id,
			type:4
		})
		uni.$u.toast('领取成功！')
		initData()
		get_coupon_vip_list()
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 50rpx;
		
	}
	
	.login-btn {
		color: white !important;
		background: var(--color) !important;
		border-radius: 12rpx !important;
	}
</style>